import React,{useState} from 'react'
import Myevents from "../utils/events"
function Header(props) {
  console.log(props);
  let [activeIndex,setActiveIndex] = useState(0)
  let changeIndex = (index)=>{
    console.log(index);
    setActiveIndex(index)
    Myevents.emit("send",index)
  }
  return (
    <div>
      <svg t="1670824361262" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1039" width="200" height="200"><path d="M514.005086 102.287228a179.00265 179.00265 0 1 1-179.00265 179.00265 179.00265 179.00265 0 0 1 179.00265-179.00265m0-102.287228a281.289878 281.289878 0 1 0 281.289877 281.289878 281.289878 281.289878 0 0 0-281.289877-281.289878" p-id="1040"></path><path d="M514.005086 507.242365A516.857365 516.857365 0 0 0 0.369768 966.614308a51.603907 51.603907 0 0 0 51.143615 57.383135 50.223029 50.223029 0 0 0 50.37646-44.239226 414.518993 414.518993 0 0 1 824.332773 0 50.223029 50.223029 0 0 0 50.37646 44.239226 51.603907 51.603907 0 0 0 51.143614-57.383135 516.857365 516.857365 0 0 0-513.737604-459.371943" p-id="1041"></path><path d="M672.806008 1022.872283h-306.861685a51.143614 51.143614 0 0 1 0-102.287228h306.861685a51.143614 51.143614 0 0 1 0 102.287228" p-id="1042"></path><path d="M596.090586 869.441441h-153.430842a51.143614 51.143614 0 1 1 0-102.287229h153.430842a51.143614 51.143614 0 0 1 0 102.287229" p-id="1043"></path></svg>
        {
            props.arr && props.arr.length ? props.arr.map((item,index)=>{
                return <span key={index} className={activeIndex === index ? "active" :""} style={{marginLeft:"30px"}} onClick={()=>changeIndex(index)}>{item.name}</span>
            }):"暂无数据"
        }
    </div>
  )
}

export default Header